<template>
    <div>
        <a-input-group compact v-for="(item, index) in amountRanges" :key="index"
            :style="index > 0 ? 'margin-top: 10px;' : ''">
            <a-input style="width: 100px; text-align: center" placeholder="最小值" default-value="0"
                v-model:value="item.start" />
            <a-input style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff" placeholder="~"
                disabled />
            <a-input style="width: 100px; text-align: center; border-left: 0" placeholder="最大值"
                v-model:value="item.end" />
            <a-select default-value="1" style="width: 100px;" v-model:value="item.ifCode">
                <a-select-option v-for="d in allIfCode" :value="d.code">
                    {{ d.name }}
                </a-select-option>
            </a-select>
            <a-button @click="addAmountRange(item, index)">+</a-button>
            <a-button @click="removeAmountRange(item, index)" v-if="index > 0">-</a-button>
        </a-input-group>
    </div>
</template>
<script>
import { API_URL_IFDEFINES_LIST, req } from '@/api/manage'
export default {
    name: 'AmountRange',
    props: {
        amountRanges: { type: Array }
    },
    data() {
        const that = this
        req.list(API_URL_IFDEFINES_LIST).then(resData => {
            resData.forEach(element => {
                that.allIfCode.push({
                    code: element.ifCode,
                    name: element.ifName
                })
            })
        })
        return {
            allIfCode: []
        }
    },
    methods: {
        addAmountRange: function (item, index) {
            this.amountRanges.splice(index + 1, 0, {
                start: this.amountRanges[index].end
            });
        },
        removeAmountRange: function (item, index) {
            this.amountRanges.splice(index, 1);
        }
    }
}
</script>